<template>
    <div>
        <a-drawer class="chat-drawer" v-model:open="visible" :mask="false" width="650px" title="聊天室" @ok="handleOk">
            <!-- {{wsInstance.readyState}} -->
            <div class="flex chat-container">
                <div>1</div>
                <div>2</div>
            </div>
        </a-drawer>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import websocket from '@/utils/websocket'
const visible = ref(false)
const wsInstance = websocket.getInstance()

const handleOk = () => {
    console.log('handleOk')
}

const open = () => {
    // if(wsInstance.readyState === ){
    visible.value = true
    // }
}
defineExpose({
    open
})
</script>

<style scoped lang="scss">
.chat-drawer {
    .ant-drawer-body{
        padding: 0 !important;
    }

    padding: 0;

    .chat-container {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 10fr;
    }
}

</style>
